<template>
    <div class="list-content">
        <ul>
            <template v-for="(item, index) in dataList" :key="index">
                <template v-if="item.images.length == 1">
                    <list-single @click="handlerItemClick(item)" :info="item"></list-single>
                </template>
                <template v-if="item.images.length > 1">
                    <list-multiterm @click="handlerItemClick(item)" :info="item"></list-multiterm>
                </template>
                <template v-if="(index + 1) % 2 == 0">
                    <list-ad @click="handlerItemClick(item)"></list-ad>
                </template>
            </template>
        </ul>
    </div>
</template>

<script setup>
import ListSingle from '@/components/layout/list/single.vue'
import ListMultiterm from '@/components/layout/list/multiterm.vue'
import ListAd from '@/components/layout/list/ad.vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store/index.js'
import { storeToRefs } from 'pinia'
import { inject} from 'vue' 

const store = useStore()
const router = useRouter();
const { dataList } = storeToRefs(store)

const handlerItemClick = (item) => {
    router.push({
        path: '/detail',
        query: {
            type: item.category,
            id: item.id,
            tpl: 'json'

        }
    })

}
</script> 

<style scoped lang="scss">
@import url(./ListItem.scss);
</style>    